<template>
  <div class="Header">
    <div class="submitLogn" @click="loginBtn">后台登陆</div>
    <div class="header">
      <img src="../../../assets/./images/header.1d5e62de.png" alt="" />
    </div>
    <!--路由导航-->
    <div class="navTitle">
      <div
        class="header"
        v-for="(item, index) in titleList"
        :key="index"
        :class="{ checked: index === currentIndex }"
        @mouseover="mouseOver(index)"
        @mouseleave="mouseLeave(index)"
        @click="trigger(item, index)"
      >
        <div>
          {{ item.title }}
        </div>
        <div
          class="childTitle"
          :style="{ display: currentIndex == index ? 'block' : 'none' }"
        >
          <div
            v-for="(list, index) in item.childTitle"
            :style="`width:100%; height: 0.8rem; text-align:center;line-height:0.8rem;${
              childIndex == index ? 'background: rgb(240, 157, 4);' : ''
            }`"
            @mouseover.stop="mouseOverTitle(index)"
            @mouseleave.stop="mouseLeaveTitle(index)"
            @click.stop="triggerTitle(list, index)"
            :key="list.id"
          >
            {{ list.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Header",
  components: {},
  props: ["path"],
  data() {
    return {
      currentIndex: "",
      childIndex: "",
      ChildIndex: "",
      titleList: [
        {
          title: "首页",
          id: 1,
        },
        {
          title: "机构职能",
          id: 2,
          childTitle: [],
        },
        {
          title: "党建队建",
          id: 3,
          childTitle: [],
        },
        {
          title: "通知通告",
          id: 4,
        },
        {
          title: "工作动态",
          id: 5,
          childTitle: [],
        },
        {
          title: "重点工作",
          id: 6,
          childTitle: [],
        },
        {
          title: "法律法规",
          id: 7,
          childTitle: [],
        },
        {
          title: "调研交流",
          id: 8,
          childTitle: [],
        },
        // "首页",
        // "机构职能",
        // "党建队建",
        // "通知通告",
        // "工作动态",
        // "重点工作",
        // "法律法规",
        // "调研工作",
      ],
    };
  },

  created() {},
  mounted() {
    this.getList();
  },
  methods: {
    // 获取数据
    async getList() {
      let data = {
        pageNum: 1,
        pageSize: 1111111,
      };
      let result = await this.$API.column.reqGetColumn(data);
      if (result.status == 200) {
        // 重构数据
        this.titleList.forEach((item) => {
          if (item.childTitle) {
            let arr = result.data.records.filter((item1) => {
              if (item1.moduleName == item.title) {
                return item1;
              }
            });
            item.childTitle = arr.map((item2) => {
              return {
                title: item2.columnName,
                id: item2.id,
              };
            });
          }
        });
      }
    },
    //切换tabs
    trigger(item, index) {
      this.currentIndex = index;
      console.log(index);
      if (index == 0) {
        this.$router.push({
          path: "/homePage/homes",
        });
      }
      if (item.title == "通知通告") {
        this.$router.push({
          path: "/homePage/catalogue",
          query: {
            isInForm: true,
          },
        });
        this.$bus.$emit("getInfrom");
      }
    },
    // 点击子节点
    triggerTitle(list, index) {
      console.log(index, "子节点");
      console.log(list);
      this.$router.push({
        path: "/homePage/catalogue",
        query: {
          name: list.title,
          id: list.id,
        },
      });
      this.$bus.$emit("getTiteLsit", {
        name: list.title,
        id: list.id,
      });
    },
    // 移入
    mouseOver(index) {
      // console.log(index, "++");
      this.currentIndex = index;
      // console.log(index);
    },
    // 移出
    mouseLeave(index) {
      this.currentIndex = "";
    },
    // 鼠标移入子节点
    mouseOverTitle(index) {
      // console.log(index);
      this.childIndex = index;
    },
    // 鼠标移出子节点
    mouseLeaveTitle(index) {
      this.childIndex = "";
    },
    //点击跳转登陆后台
    loginBtn() {
      this.$router.push({
        path: this.username ? "/dashboard" : "/login",
      });
    },
  },
  watch: {},
  computed: {
    ...mapGetters(["username"]),
  },
};
</script>

<style lang="scss" scoped>
.Header {
  position: relative;
  .submitLogn {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    font-size: 0.2rem;

    color: #ffff;
    font-weight: 500;
    cursor: pointer;
  }
  .header {
    // margin-bottom: 1px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 19.2rem;
    }
  }
  .navTitle {
    margin: 0 auto;
    width: 100%;
    height: 0.8rem;
    background: -webkit-linear-gradient(top, #93d1f3, #13a1ee);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header {
      width: 100%;
      height: 100%;
      color: #ffff;
      font-weight: bold;
      font-family: Microsoft YaHei;
      cursor: pointer;
      font-size: 0.2rem;
    }
    .checked {
      background: rgb(240, 157, 4);
      width: 100%;
      height: 100%;
    }
    .childTitle {
      width: 2.36rem;
      z-index: 1000;
      position: absolute;
      top: 4.321rem;
      font-weight: bold;
      font-size: 0.2rem;
      background: -webkit-linear-gradient(top, #93d1f3, #13a1ee);
    }
  }
}
</style>
